<template>
  <div>
    <div v-if="!aclShow">
      <el-form ref="form" label-width="80px" inline>
        <el-form-item>
          <el-input v-model="roleName" placeholder="角色名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRoleList">查询</el-button>
          <el-button @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" size="mini" @click="openDialog(1)">添加</el-button>
        <el-button type="danger" size="mini" @click="deleteRoles">批量删除</el-button>
      </div>
      <el-table :data="roleList" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="roleName" label="角色名"></el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间"></el-table-column>
        <el-table-column prop="gmtModified" label="修改时间"></el-table-column>
        <el-table-column prop="date" label="操作">
          <template slot-scope="{row,$index}">
            <hint-button title="权限设置" @click="getRoleAcl(row.id)" type="info" icon="el-icon-info" size="mini"></hint-button>
            <hint-button title="修改" @click="openDialog(row)" type="primary" icon="el-icon-edit" size="mini"
            ></hint-button>
            <el-popconfirm title="确定删除吗？" @onConfirm="deleteRole(row)">
              <hint-button title="删除" slot="reference" type="danger" icon="el-icon-delete" size="mini"></hint-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--分页器-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align: center"
        :current-page="page"
        :page-sizes="[5, 10, 15]"
        :page-size="limit"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
      ></el-pagination>
    </div>
    <!--新增/修改角色-->
    <el-dialog :title="roleInfo.id?'修改角色':'新增角色'" :visible.sync="dialogFormVisible">
      <el-form :model="roleInfo">
        <el-form-item label="角色名称" label-width="120">
          <el-input v-model="roleInfo.roleName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
    <!--权限设置-->
    <el-tree
      :data="aclList"
      show-checkbox
      ref="tree"
      v-if="aclShow"
      :props="defaultProps"
      node-key="id"
      :default-expand-all="true"
      :default-checked-keys="defaultSelected"
    >
    </el-tree>
    <el-form inline="" label-width="80px" style="text-align: center">
      <el-button type="primary" @click="doRoleAclAssign">保存</el-button>
      <el-button @click="aclShow=false;">取消</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      //对话框
      dialogFormVisible: false,
      //角色名称
      roleName: '',
      //分页器属性
      page: 1,
      total: 10,
      limit: 10,
      //角色列表
      roleList: [],
      //角色信息
      roleInfo: {
        'roleName': ''
      },
      //id集合
      idList: [],
      //权限列表
      aclList: [],
      aclShow: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      //给角色分配权限的id列表
      roleAclIdList:{
        "roleId": "",
      },
      //默认选中节点
      defaultSelected:[],
    }
  },
  mounted() {
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      if (this.roleName === '') {
        let res = await this.$API.role.reqRoleList(this.page, this.limit)
        if (res.code === 20000) {
          this.roleList = res.data.items
        }
      } else {
        let res = await this.$API.role.reqRoleList(this.page, this.limit, this.roleName)
        if (res.code === 20000) {
          this.roleList = res.data.items
        }
      }
    },
    handleSizeChange(size) {
      this.limit = size
      this.getRoleList()
    },
    handleCurrentChange(page) {
      this.page = page
      this.getRoleList()
    },
    //清空
    clear() {
      this.roleName = ''
      this.getRoleList()
    },
    //取消按钮
    cancel() {
      this.dialogFormVisible = false
      this.roleInfo = { roleName: '' }
    },
    //打开对话框
    openDialog(role) {
      this.dialogFormVisible = true
      this.roleInfo = role.id ? role : { 'roleName': '' }
    },
    //提交添加/修改 确定按钮
    async addOrUpdate() {
      if (this.roleInfo.id) {
        let res = await this.$API.role.reqUpdate(this.roleInfo)
        if (res.code === 20000) {
          this.$message('修改成功')
          this.dialogFormVisible = false
          await this.getRoleList()
        }
      } else {
        let res = await this.$API.role.addRole(this.roleInfo)
        if (res.code === 20000) {
          this.$message('添加成功')
          this.dialogFormVisible = false
          await this.getRoleList()
        }
      }

    },
    //删除一个角色
    async deleteRole(row) {
      let res = await this.$API.role.reqDeleteRole(row.id)
      if (res.code === 20000) {
        this.$message('删除成功')
        await this.getRoleList()
      }
    },
    //多选角色
    handleSelectionChange(val) {
      console.log(val)
      this.idList = []
      val.forEach(item => {
        this.idList.push(item.id)
      })
    },
    //批量删除
    deleteRoles() {
      this.$confirm('确定删除吗').then(async() => {
        let res = await this.$API.role.reqDeleteRoles(this.idList)
        if (res.code === 20000) {
          this.$message('删除成功')
          await this.getRoleList()
        }
      })
    },
    //获取角色的权限
    async getRoleAcl(id){
      this.aclShow=true
      this.roleAclIdList.roleId = id
      let res = await this.$API.role.reqUserAcl(id)
      if (res.code===20000){
        this.aclList = res.data.children
        this.defaultSelected = this.getSelectIds(this.aclList)
      }
    },
    //选择被选中的节点的id 递归
    getSelectIds(aclList,initArr = []){
      return aclList.reduce((pre,cur)=>{
        if (cur.select){
          pre.push(cur.id)
        }else if(cur.children){
          this.getSelectIds(cur.children, initArr)
        }
        return pre
      },initArr)
    },
    //提交权限分配 保存
    doRoleAclAssign(){
      this.roleAclIdList.permissionIdList=(this.$refs.tree.getCheckedKeys())
      // console.log(this.roleAclIdList)
      this.$API.role.reqDoAssignAcl(this.roleAclIdList).then(res=>{
        this.$message(res.message || '成功')
      })
    }
  }
}
</script>

<style scoped>

</style>
